<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>页面头部导航栏</title>

    <!-- Bootstrap -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script th:src="@{/js/jquery-3.3.1.js}"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script th:src="@{/js/bootstrap.min.js}"></script>

    <link rel="stylesheet" th:href="@{/css/header.css}">
    <!-- Favicon -->
    <link rel="icon" th:href="@{/img/icon/favicon.ico}">

    <script>
        $(function () {//获取表单并跳转
            $("#btn").click(function () {
                var key=$("#ipt").val();
                var url="/searchDetail/"+key;
                location.href=url;
            });
        });
    </script>
</head>
<body>
  <div th:fragment="copy">
    <img th:src="@{/img/banner_top.png}" alt="" style="position: relative;top: -20px;width: 100%;">
    <nav class="navbar navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#" style=":hover{background-color: white;}">Passer</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="/">首页 <span class="sr-only">(current)</span></a></li>
                    <li><a href="/jingdian">必玩景点</a></li>
                    <li><a href="/meishi">美食特产</a></li>
                    <li><a href="/youji">游记攻略</a></li>
                    <li><a href="/">商丘文化</a></li>
                    <li><a href="/">精彩视频</a></li>
                    <li><a href="/map">出行地图</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">地区 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">商丘</a></li>
                            <li><a href="#">玉林</a></li>
                            <li><a href="#">广西</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">全国</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">其他</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="搜目的地/攻略/酒店" name="key" id="ipt">
                    </div>
                    <button type="button" class="btn btn-default" id="btn">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right" id="nav-user">
                    <li><a href="#">关于商丘</a></li>
                    <script>
                        //用户登录信息
                        $.get("/user/getUserInfo",null,function (data) {
                            var userInfo=$.parseJSON(data);
                            //加载用户名称
                            if (userInfo!=null){
                                $("#nav-user").append('<li class="dropdown">\n' +
                                    '                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span id="nickname">'+userInfo.nickname+'</span><span class="caret"></span></a>\n' +
                                    '                        <ul class="dropdown-menu">\n' +
                                    '                            <li><a href="#">个人主页</a></li>\n' +
                                    '                            <li role="separator" class="divider"></li>\n' +
                                    '                            <li><a href="#">修改账户信息</a></li>\n' +
                                    '                            <li><a href="/user/logout">退出</a></li>\n' +
                                    '                        </ul>\n' +
                                    '                    </li>');
                            } else {
                                $("#nav-user").append('<li class="dropdown">\n' +
                                    '                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">账户 <span class="caret"></span></a>\n' +
                                    '                        <ul class="dropdown-menu">\n' +
                                    '                            <li><a href="/user/toLogin">登录</a></li>\n' +
                                    '                            <li><a href="/user/toRegister">注册</a></li>\n' +
                                    '                            <li><a href="#">找回密码</a></li>\n' +
                                    '                            <li role="separator" class="divider"></li>\n' +
                                    '                            <li><a href="#">修改账户信息</a></li>\n' +
                                    '                        </ul>\n' +
                                    '                    </li>');
                            }
                        });
                    </script>
                    <!--用户未登录-->
                    <!--<li class="dropdown" th:if="${userInfo} eq null">-->
                        <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">账户 <span class="caret"></span></a>-->
                        <!--<ul class="dropdown-menu">-->
                            <!--<li><a href="/user/toLogin">登录</a></li>-->
                            <!--<li><a href="/user/toRegister">注册</a></li>-->
                            <!--<li><a href="#">找回密码</a></li>-->
                            <!--<li role="separator" class="divider"></li>-->
                            <!--<li><a href="#">修改账户信息</a></li>-->
                        <!--</ul>-->
                    <!--</li>-->
                    <!--用户已登陆-->
                    <!--<li class="dropdown" th:if="${userInfo} != null">-->
                        <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span th:text="${userInfo.nickname}">账户</span> <span class="caret"></span></a>-->
                        <!--<ul class="dropdown-menu">-->
                            <!--<li><a href="#">个人主页</a></li>-->
                            <!--<li role="separator" class="divider"></li>-->
                            <!--<li><a href="#">修改账户信息</a></li>-->
                            <!--<li><a href="/user/logout">退出</a></li>-->
                        <!--</ul>-->
                    <!--</li>-->
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
  </div>
</body>
</html>
